<template>
  <div>
    <el-checkbox-group v-model="roleIds">
      <el-checkbox :label="item.id" v-for="item in list" :key="item.id"
        >{{ item.name }}
      </el-checkbox>
    </el-checkbox-group>

    <div style="margin-top: 20px; text-align: right">
      <el-button type="primary" @click="hSubmit">确定</el-button>
      <!-- 利用子传父 关闭弹窗 -->
      <el-button @click="$emit('close')">取消</el-button>
    </div>
  </div>
</template>
<script>
import { getRoles } from "@/api/settings";
import { getUserDetailById } from "@/api/user";
import { assignRoles } from "@/api/employees";
export default {
  props: {
    // 当前用户的id
    roleId: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      list: [], //存 获取到的角色列表
      //   roleIds: ['115'],  //假如 里面写115 (115要加引号)   页面默认人事被勾选
      roleIds: [],
    };
  },
  created() {
    this.loadRoles(); //页面加载渲染数据
  },
  methods: {
    // 确认提交
    async hSubmit() {
      try {
        const res = await assignRoles({
          id: this.roleId,
          roleIds: this.roleIds,
        });
        console.log("assignRoles", res);
        if (res.code !== 10000) return this.$message.error(res.message);
        this.$message.success(res.message);
        this.loadRoles(); //获取角色列表
        // 关闭弹层
        this.$emit("close");
        // 保存数据
      } catch (err) {
        console.log("assignRoles", err);
      }
    },
      // 获取角色列表
  async loadRoles() {
    try {
      // const res = await getRoles();  //因为 只这样写  永远就只有那几个角色,  
      const res = await getRoles({pagesize:100});//角色列表可以最大显示100个
      console.log("getRoles", res);
      // 保存数据
      this.list = res.data.rows;
      // 发送请求获取当前用户拥有的角色,选中复选框
      const info = await getUserDetailById(this.roleId);
      console.log("info", info);
      //  保存数据
      this.roleIds = info.data.roleIds
    //   如果上面的出错了  就用这个
    //   this.roleIds = info.data.roleIds || [];
    } catch (err) {
      console.log("getRoles", err);
    }
  },
  },

}
</script>
